La idea la vi en The Technology Hub y la forma de hacerlo es la siguiente:
Justo antes de </head> añadimos:
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
El siguiente paso es añadir el script que contiene el color de fondo justo antes de </body> ya sabéis, al final de la plantilla.
<script type="text/javascript">
$(document).ready(function() {
$("#comments-block dt").each(function(i){
var divId='zpk' + i.toString();
$(this).before("<div id='" + divId + "'></div>");
$(this).next().next().prependTo("#" + divId);
$(this).next().prependTo("#" + divId);
$(this).prependTo("#" + divId);
$("#" + divId).css("padding","10px");
if(i%2==0){
$("#" + divId).css("background-color","#B8D62F");
}else{
$("#" + divId).css("background-color","#DFF294");
}
});
});
</script>
En background-color podemos sustituir los colores.

También con jQuery podemos añadir el número de orden en los comentarios, bastaría con incluir justo antes de </head> lo siguiente.
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'>
(Si incluimos el anterior script para añadir color no es necesario volver a añadirlo)
También añadimos antes de </head>
<script type="text/javascript">
$(document).ready(function() {
$("#comments-block").find("dt").each(function(i){
$(this).prepend("<span style='color:red;margin-right:2px;"
+ "padding:2px;background-color:silver'>"
+ (i+1).toString() + ".</span>" );
});
});
</script>
En color:red tenemos el color del número.
Con background-color:silver añadimos color al fondo del número, si no deseamos color de fondo bastará con suprimir esa parte.

Buenas tocaya, muy útil este truco, creo que lo utilizaré...
Disculpa que te haga la consulta aqui, pero es que intenté poner el efecto rollover sobre una imagen, de aqui de tu blog, y creo que he roto algo de la plantilla, ahora me da un fallo al tratar de entrar desde IE...no es que yo lo use, pero como no se puede controlar desde dónde entran tus visitas...pues no me hace gracia tenerlo asi...qué puedo hacer?? he dado mil vueltas a la plantilla, y no encuentro el fallo...me puedes ayudar?
Este post me ha caido de perlas¡¡¡ Acabo de cambiar la plantilla y no sabia como cambiar el fondo del formato de comentarios¡
Gracias :)
Hola Que tal! Tengo un blog de fotografía se llama "En Busca de la Mejor Foto"
la dirección es: http://buscandolafoto.blogspot.com/
y estoy regalando gratis espacios para tu favicón, de momemto creo que pondre hasta 100.
Anímate a esta fiebre del 2009
Hay mi Dios :D no vuelvo a tocar los comentarios, ya bastaaa ;)
No, en serio está lindo, una preguntita solo de curiosa, no voy a cambiar nada ehh :O no, no, me niegoooo...
En background color de los coments, no del número, como se sabe cual es del autor y cual el del comentarista?
Otra pavadita... leíste el título de este post? ja ja :D Si lo hiciste, volvé a hacerlo por favor ja ja
Y los emoticones??? Se fueron???
yz Gemma no sé ese fallo que puede ser el blog se ve sin problemas con Explorer, de todas formas por añadir un efecto rollover en una entrada no se produce ese problema :O
yz Pues todo tuyo Pilyboop :)
yz Gracias Triki si que parece una fiebre últimamente todo el mundo los añade :)
yz No se sabe k_nelita, salen los colores alternos es diferente al que tenemos tu y yo aplicado. es como añadir un color a los pares y otro a los impares :)
¿A qué emoticones te refieres? yo los veo :O
yz Rectifiqué el título k_nelita menos mal que estás ahí :)
Ja ja... no los emoticones no salen... hasta le desabilité el adblock y no, no se ven solo los símbolos... veo que estás poniendo ahora antes de escribir una y y una z y no se que es eso... porque yo no veo ningún emoticón? Ya me enteré por allí que estuviste haciendo arreglos con eso, pero yo no veo ni lo nuevo ni lo de antes...
Preguntá a alguien mas, en mi blog si los veo...
Me viene muy bien este post, Gem@... soy nuev@ en esto y el tema de mejorar el look de los comentarios era algo pendiente.
Te dejo un link para que leas cuando tengas tiempo:
http://migraciones--internas.blogspot.com/2009/01/primer-mes-de-migraciones-internas.html
Gracias ;)
yz k_nelita tendremos que preguntar, modifiqué el script de los emoticones pero J.Miur si los veía en el blog de pruebas y aquí es el mismo.
yz Gracias E-migrad bienvenido.
Ahora si gem@ veo hasta el nuevito ese que es como un cuadradito que pones al comenzar a escribir, que lindo! :D por lo visto se hace yz no?
yz Si k_nelita lo añadí para señalar mis respuestas :)
Muy lindo gem@, queda muy fino y elegante, yo podría hacer algo así pero en otro color?
Has cambiado algún otro emoticón o solo agregaste ese? ;)
Muy simple y facil, lo malo es tener que cargar un archivo externo, y yo sigo sin solucionar el problema enlace-comentario espesífico.
será un problema en la plantilla??
en un principio no se veían los emoticones, ahora si (lei el comentario anterior de k_nelita)
:)Gema viene muy bien para los que no han realizado cambios allí...siempre hay nuevos blogs y ofrecerles alternativas está muy bueno!!! yo ni los toco, con el tiempo que me han llevado!!! mis besos!!!
yz Te mando explicación al correo K_nelita aquí sería extenso ;)
yz Bonzu cualquier archivo externo es un riesgo que deje de funcionar pero en este caso no existe el problema que funcione mal algo simplemente se mostrarían los comentarios sin color de fondo.
Pensaba que J.Miur te había dado la solución aL problema de enlaces-cometarios :O
yz Así es Graciela es muy sencillo y no asusta añadirlo :)
J.Miur siempre dice... Si algo funciona mejor no tocarlo (y tiene toda la razón del mundo porque a veces por cambiar lo que conseguimos es estropearlo)
Gracias Gema por éste tutorial.
Soy nueva en ésto de los blogs y tengo poca idea, pero he seguido tus pasos y me ha salido a la primera.
Un saludo. iherba
:s va! que raro no salio mi coment? bueno te felicito por esas grandes ideas... y seria un honor tener un comentario tuyo en mi blog :D
Gracias a ti Iherba por comentar :)
yz Emma los editores de comentarios funcionan cuando quieren ¿no lo sabías? llevamos meses así. Pasé por tu blog ;)
☝ Me dió obciones y alternativas, pero ninguna funcionó.
Hola Gema te deseo una buena y fría tarde, aún que parezca raro a mi me gusta tal y como lo presenta blogger pero creo que ya va siendo hora de personalizar los mios y tu post me ha gustado sin lugar a dudas que lo tendré muy presente para hacerlo.
P.D. Lo de fría porque realmente hace una tarde muy fría, no porque quiero que tu tengas frío ;)
Recuerdo que lo estuve mirando Bonzu y es extraño, muy extraño que siguiendo los pasos de J.Miur no resultara :(
yz Te entendí Sisco.
Aquí también hace frío |O
Parece que también se quedó con un gigante ?
No entiendo tu comentario Bonzu.
Hola gema me encanta tu blog y realmente ahora es uno de mis favritos, tenbien te escrbo para desirte si me puedes ayudar con un problema que tengo y es que mis visitantes no me pueden ejar comentarios en las entradas de mi blog porque la ventanillas no se habren y ya barias personas me an escrito disiendome lo mismo, y he canbiadola plantilla y el problema es el mismo, me puedes ayudar?
gracias.
Llovely mira si tienes marcada la opción de mostrar comentarios.
En Configuración/Comentarios lo puedes ver, otro sitio para mirar es en la plantilla de diseño donde dice Entradas del blog un poco más abajo hay un enlace "Editar" clicas ahí y mira si está marcada la casilla de comentarios.
no consigo que me funcione :s
En qué blog lo estás añadiendo MigueL?
en http://migueljimenezz.blogspot.com, hasta ahora estoy poniendole lo que mas me gusta,
y tu blog y el de jmiur me han ayudado un resto!
:) gracias
Lo he comprobado MigueL y el script está correcto, prueba a mover el primero (jquery-latest.min.js') justo antes de </head>
noo,no me funciona :((
Queda la opción de hacerlo de otra forma ΜigueŁ aquí encontrarás otra forma de darles color.
Muchas gracias por tu ayuda, de todas maneras decidi cambiar de plantilla (y dejar de intentar crearla yo mismo), aunque sigue sin dejarme hacer esto...pero intentaré tu recomendacion.
gracias! :)
yz Estupendo Miguel :)
lo siento Gema por preguntar tanto y abusar de tu generosidad.
Me he dado cuena hace ya unos dias que si creo un enlace, dicho enlace se pone de un color verde oscurito y que al pasar el raton por encima cambia de color conforme este el color del titulo de las entradas.
Antes tenia el color de los titutulos de las entradas azul y entonces los enlaces al pasar el raton por encima tomaban el color azul, ahora cambie el color del titulo de las entradas por naranja y el enlace toma color naranja, alguna forma de solucionarlo por fis. No quiero que haga ese efecto.
lo puedes ver aqui
http://pruebadqq.blogspot.com/
yz Vamos a intentar solucionarlo Ana.
Busca en tu plantilla donde dice:
#outer-wrapper {
font:normal normal 100% Verdana, sans-serif;
}
a {
color:#38B63C;
}
a:hover {
color:#f2984c;
}
a img {
border-width: 0;
}
Eliminas lo que está en negrita, y te sitúas en:
body {
margin:0px;
padding:0px;
background:#000000;
color:#ffffff;
font-size: small;
}
justo después añades:
a:link {color:#ffffff;text-decoration:none;}
a:visited {color:#ffffff;text-decoration:none;}
a:hover {color:#ffffff;text-decoration:none;}
a img {border-width:0;}
Te aparecen todos los enlaces en blanco (#ffffff) los modificas de forma que:
» a:link "tal y como lo vemos"
» a:visited "enlace visitado"
» a:hover "con el cursor encima"
Ya me dices si ordenando eso se soluciona ;)
Si Gema muchas gracias se solucionó pero surgió otro problema, pero supongo que será fácil solucionarlo, los enlaces no salen subrayados y me gustaría que esten subrayados. Muchas gracias
Ya esta arreglado Gema, solo habia que cambiar el "none" por "underline" jijiji, ya voy aprendiendo :)
yz Biennn Ana, ya veo que cogiste carrera :)
hola Gema
tengo 2 Preguntas
1. el contador de los comentarios me queda junto con el nombre de autor ¿como puedo separarlo?
2. Quisiera poder colocar el nombre de autor centrado con el avatar
Mil Gracias!!
PD: Talvez puedas visitar mi blog para que me puedas ayudar
Hola Gema, gracias por todo, antes que nada.
Dos cositas:
En mi recien iniciado blog no está funcionando este efecto. ¿que puedo hacer para que funcione? Por favor checalo: http://carlos-and-suly-work.blogspot.com/2009/12/un-nuevo-ano.html
La otra cosita: ¿Cómo puedo hacer para tener un perfil como el tuyo el cual está abajo de este blog. Es decir donde aparece tu foto y más información tuya?
Gracias por todo
Bendiciones
:: Carlos Hernández tengo problemas para visualizar esa url :S
El perfil es simplemente html, ubicar la imagen de la siguiente forma:
http://gemablog-.blogspot.com/2008/04/pie-de-foto-o-leyenda.html
Y el resto son enlaces tipo texto.
Hola Gema,
Precisamente a eso me refería. Yo apliqué los pasos que explicas en esta entrada a mi blog y desde entonces cuando voy a entradas donde hay unos comentarios no funciona. Esta es la dirección de mi blog. Haz clic en una entrada llamada "Un nuevo año" y notarás lo mencionado. ¿Que puedo hacer? ¿Será que mi plantilla no es compatible con este efecto?
:$ Que verguenza pero ya que soy un novato no sé si entendí lo del perfil y el html. ¿Te refieres a que debo utilizar un gadget de html y ponerlo al final posterior de mi blog para que quede como el tuyo?
Gracias por tu paciencia.
Bendiciones
http://carlos-and-suly-work.blogspot.com/
:: Pues lo primero de todo quitar lo que se añadió :S y luego vamos a añadir el mismo efecto sólo que de otro modo, será quizás más trabajo pero dará mejor resultado.
Se trata de añadirlos tal y como yo les tengo, es una idea de Vagabundia y en la siguiente url hay una explicación muy detallada:
http://vagabundia.blogspot.com/2007/10/blogger-y-los-comentarios-1.html
Cuando dije que el perfil está creado con html me refería al contenido del perfil, la forma que se muestra. Otra cosa distinta es el sitio donde se muestra "el footer del blog" (final del blog) en el footer del blog se pueden añadir gadgets, algunas plantillas los traen y en otras hay que añadirlos, yo los tengo en tres columnas de forma que me permite poner tres gadgets en horizontal y a su vez puedo añadir unos sobre otros.
En uno de esos gadgets es donde está incluido el gadget de html con el contenido del perfil :)
Resumiendo, esta es la forma de crear un footer de tres columnas:
http://gemablog-.blogspot.com/2009/04/columnas-en-el-footer.html
- Lo de la vergüenza me ha llegado al alma ¿por qué vergüenza? ¿por preguntar? debo ser una descarada pregunto continuamente y no siento eso :S
Muchas gracias por todo.
Ahora estoy empezando a trabajar en la solución.
¿Como le hago para mandarte un efecto jquery que aprendí para que tu lo compares y veas si ya lo tienes?
Ya no me averguenzo por preguntar...
Gracias y bendiciones...
:: Saludos Carlos Hernández, me alegra que todo vaya por buen camino, sobre el efecto de jQuery no sé la forma de poder verlo, si está añadido en algún blog puede pasarme el enlace, mi mail también está a disposición de todos es el siguiente:
forevergema(arroba)gmail.com
Orale gema tu web me es de mucha ayuda pero sabes quisiera poner los numero de lado derecho como los tienes tu pero no me da me ayudas
:: Yo lo hice siguiendo esta entrada C@r/os:
http://gemablog-.blogspot.com/2008/09/nmero-de-comentarios-en-forma-de.html
Hola Gem@ una ves mas yo con una pregunta para variar :D quiero colocar los numeros del lado derecho segui los pasos de la entrada que haces referencia en tu comentario anterior pero aun asi no me dio creo que se debe a que tengo numeracion en la parte de arriba tambien y la orden se la da es a ese numero por eso quite el truco pero si puedes ve a mi blog de pruebas =D http://nuevaspruebasalea2.blogspot.com/2010/08/camila.html
Gracias
:: Ese efecto del número de comentarios en forma de burbuja del enlace de arriba funciona muy bien y sin problemas,la diferencia es que lo que se muestra es la cantidad de comentarios en la entrada y con esta entrada añade un contador a cada comentario.
Las dos formas funcionan bien sólo que la otra ubicas con facilidad la burbuja al principio de la entrada. Debe ser otro problema el que no te aparezca pero debería verlo añadido para saberlo.
Hay otro sistema que se explica en Vagabundia y es el que yo tengo aquí en los comentarios:
http://vagabundia.blogspot.com/2007/10/blogger-y-los-comentarios-1.html
Bien Gem@ aqui estoy de regreso esta vez dejare el truco aplicado para que lo puedas ver te encontraras con dos numeros de comentarios uno dentro de una burbuja azul y otro en un recuadro algo grande de color verde ese ultimo es el que se dio con el truco de esta entrada http://gemablog-.blogspot.com/2008/09/nmero-de-comentarios-en-forma-de.html
una ves que entras a una de las entradas de el blog en este caso uno de prueba te encuentras con el mismo numero que esta en la entrada principal de el blog pues bien lo que yo quiero no es eso ya que lo tengo aplicado en una burbuja en la parte superior de las entradas principales...
Lo que me gustaria es poder cambiar de ubicasion izquierda a derecha el numero de los comentarios y si es posible poder aunmentar un poco su tamaño eso es lo que quiero hacer hay forma de hacerlo con este mismo truco de JQuery?
Una ves mas esta es la url de el blog de pruebas http://nuevaspruebasalea2.blogspot.com/2010/08/camila.html
Gracias y disculpa las molestias que pueda causarte :$
:: Estuve probando Magoplup y resulta complicado ubicar la numeración a la derecha porque al modificar el script también movemos el nombre de autor y queda fuera del bloque.
Por eso te dejé un enlace donde es posible añadir el contador de comentarios tal y como yo lo tengo.
Wiiiiii Wiiiiiiiiiii Wiiiiiii Gem@ Gem@ disculpa el escandalo jajajaja pero es que lo logre :) logre colocar los numeros de el lado derecho solo aplicandole un float:right; antes de padding:2px;background-color:silver'> :) eso si una ves aplicado por que el codigo luego cambia agregando unos " asi que luego de aplicado si lo agregue y quedo perfecto :) puedes verlo aqui http://nuevaspruebasalea2.blogspot.com/2010/08/camila.html
Gemaaaaa help me please!!!!
Bueno antes de nada GRACIAS, GRACIAS y GRACIAS por toda tu ayuda.
1º Estaba buscando como modificar la leyenda de Comentarios (como tu que tienes puesto Opiniones), y bueno no lo encuentro por ningun lado.
2º Ya que encontré lo poner colores a los comentarios me detuve aqui, pero.... solo me sale un comentario completo con color, el otro color solo cubre al nombre del comentarista.
Cuando tengas un ratito (sin prisas) échale un vistazo a esta entrada (http://tertuliademaestrasdeinfantil.blogspot.com/2009/05/gracias-tods.html) que es donde mejor se ve el efecto de los colores.
GRACIAS nuevamente
Salu2
:: Vanesa está en la etiqueta de comentarios lo que ocurre que me cuesta mucho encontrar los títulos adecuados para ñas entradas soy un desastre para eso:
http://gemablog-.blogspot.com/2008/09/modificar-el-texto-de-0-comentarios-1.html
El tema de los comentarios se escapa de mis manos porque todo trabaja con scripts no hay unos estilos para poder modificar :(
@Gem@
Gracias Gema
Hola Gema, queria saber lo siguiente xD. ¿Seria posible añadirel una especie de barra a de color a los comentarios?, una cosa como esta.
http://img843.imageshack.us/img843/1969/comeee.png
:: Kaede en #comments-block .comment-author puedes añadir color de fondo con background:#aquícolor;
Es algo asi lo que estaba buscando xD, solamente de que la "barra" sale unos cuantos pixeles separa del comentario ¿como puedo arreglar eso?
Gracias por tu atencion!
Nota: solo los miembros de este blog pueden publicar comentarios.